<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>设备维护</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript" src="./data/sensor.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body onload="initSelectData()" style="background-color: white;">
<div class="layui-input-inline" style="margin-left: 20px;">
    <i class="layui-icon layui-icon-edit"></i>文本&nbsp;&nbsp;<input type="radio" value="1" name="select_resource"
                                                                   checked="checked">&nbsp;&nbsp;&nbsp;&nbsp;
    <i class="layui-icon layui-icon-picture"></i>图片&nbsp;&nbsp;<input type="radio" value="2" name="select_resource">&nbsp;&nbsp;&nbsp;&nbsp;
    <i class="layui-icon layui-icon-video"></i>视频&nbsp;&nbsp;<input type="radio" value="3" name="select_resource">&nbsp;
</div>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">

            </div>

            <div class="layui-form-item" id="div_txt">

                <label for="L_resourcesName" class="layui-form-label">
                    <span class="x-red">*</span>标题:</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_resourcesName" name="resourcesName" required="" lay-verify="resourcesName"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-item">

                </div>

                <label for="L_txtContent" class="layui-form-label">
                    <span class="x-red">*</span>文本内容:</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_txtContent" name="txtContent" required="" lay-verify="txtContent"
                           autocomplete="off" class="layui-input">
                </div>
                多行文本：                   &nbsp; <input  type="checkbox" id="input_multiline">
            </div>

            <div class="layui-form-item" id="div_file">
                <label for="file_1" class="layui-form-label">
                    <span class="x-red">*</span>文件:</label>
                <div class="layui-input-inline">
                    <input type="file" id="file_1" name="resourceFile" required="" lay-verify="resourceFile"
                           autocomplete="off" class="layui-input"></div>

            </div>


            <!--            <div class="layui-form-item">-->
            <!--                <label for="L_locationX" class="layui-form-label">-->
            <!--                    <span class="x-red">*</span>位置X:</label>-->
            <!--                <div class="layui-input-inline">-->
            <!--                    <input type="text" id="L_locationX" name="coordinatex" required="" lay-verify="coordinatex" autocomplete="off" class="layui-input"></div>-->
            <!--            </div>-->
            <!--            <div class="layui-form-item">-->
            <!--                <label for="L_locationY" class="layui-form-label">-->
            <!--                    <span class="x-red">*</span>位置Y:</label>-->
            <!--                <div class="layui-input-inline">-->
            <!--                    <input type="text" id="L_locationY" name="coordinatey" required="" lay-verify="coordinatey" autocomplete="off" class="layui-input"></div>-->
            <!--            </div>-->
            <!--            <div class="layui-form-item">-->
            <!--                <label for="L_locationZ" class="layui-form-label">-->
            <!--                    <span class="x-red">*</span>位置Z:</label>-->
            <!--                <div class="layui-input-inline">-->
            <!--                    <input type="text" id="L_locationZ" name="coordinatez" required="" lay-verify="coordinatez" autocomplete="off" class="layui-input"></div>-->
            <!--            </div>-->
            <!--            <div class="layui-form-item">-->
            <!--                <label for="L_contentpids" class="layui-form-label">-->
            <!--                    <span class="x-red">*</span>内容编号:</label>-->
            <!--                <div class="layui-input-inline">-->
            <!--                    <input type="text" id="L_contentpids" name="contentpids" required="" lay-verify="contentpids" autocomplete="off" class="layui-input"></div>-->
            <!--            </div>-->
            <!--            <div class="layui-form-item">-->
            <!--                <label for="L_audioid" class="layui-form-label">-->
            <!--                    <span class="x-red">*</span>语音ID:</label>-->
            <!--                <div class="layui-input-inline">-->
            <!--                    <input type="text" id="L_audioid" name="audioid" required="" lay-verify="audioid" autocomplete="off" class="layui-input"></div>-->
            <!--            </div>-->
            <!--            <div class="layui-form-item" style="display: none;">-->
            <!--                <label for="L_contentID" class="layui-form-label">-->
            <!--                    <span class="x-red">*</span>播放内容</label>-->
            <!--                <div class="layui-input-inline">-->
            <!--                    <input type="text" id="L_contentID" name="contentpids" required="" lay-verify="contentpids" autocomplete="off" class="layui-input"></div>-->
            <!--            </div>-->


            <div class="layui-form-item">
                <!--                        <label for="test" class="layui-form-label"></label>-->
                <label class="layui-form-label"></label>
                <label class="layui-form-label"></label>
                <button class="layui-btn" id="btn_upload" lay-filter="upload"
                        lay-submit="">上传
                </button>
                <button class="layui-btn" lay-filter="add" lay-submit="">确定</button>
            </div>
            <hr class="layui-border-box">
            <div>
                <table style="width: 30px; font-size: 12px;" id="setStyleTable" class="layui-table">
                    <tr>
                        <td>字号:</td>
                        <td>
                            <select id="L_txtFontSize" style="width: 20%;">
                                <option>6</option>
                                <option>8</option>
                                <option>10</option>
                                <option>12</option>
                                <option selected="selected">14</option>
                                <option>16</option>
                                <option>20</option>
                                <option>24</option>
                                <option>28</option>
                                <option>32</option>
                                <option>36</option>
                                <option>48</option>
                                <option>72</option>
                            </select>
                        </td>
                        <td>颜色:</td>
                        <td><input id="L_txtFontColor" type="color" class="layui-input-inline" value="#FF0000"/>
                        </td>
                    </tr>

                    <tr>
                        <td>特效:</td>
                        <td>
                            <select id="L_txtSpecial" style="width: 20%;">
                                <option value="1">静止</option>
                                <option value="3">左移</option>
                            </select>
                        </td>
                        <td>背景色:</td>
                        <td><input id="L_txtBgColor" type="color" class="layui-input-inline" value="#FF000000"/>
                        </td>
                    </tr>

                    <tr>
                        <td>居左:</td>
                        <td><input id="L_txtLeft" type="text" class="layui-input" value="0"></td>
                        <td>居上:</td>

                        <td><input id="L_txtTop" type="text" class="layui-input" value="0"></td>
                    </tr>
                    <tr>
                        <td>停留:</td>
                        <td><input id="L_txtStay" type="text" style="width: 30px; display: inline;"
                                   class="layui-input" value="10">(秒)
                        </td>
                        <td>速度:</td>
                        <td><input id="L_txtSpeed" type="text" class="layui-input" value="10">取值范围1~20 （越小越快）</td>
                    </tr>
                    <tr>
                        <td>尺寸</td>
                        <td>
                            <select id="select_ledSize">
                                <option value="25">P2.5</option>
                                <option value="15">P1.5</option>
                            </select>
                        </td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </div>
            <div id="content"></div>
        </form>

    </div>
</div>
<script>


    // $(function () {
    //     initSelectData();
    // });
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }

    var curInfo;
    $(document).ready(function () {
        let pid = getQueryVariable("id");
        debugger;
        if (pid == 0 || pid == false)
            return;
        var initLedInfo = sensorServer.getContentResourcesById({"id": pid});
        curInfo = initLedInfo;
        $("#L_txtContent").val(curInfo.txtContent);
        initSelectData(curInfo);
    });

    // 点击单选按钮后触发，即，我们选择“男”时，触发一个事件，弹出选中的值
    $(document).ready(function () {
        $("#div_file").hide();
        $("#btn_upload").hide();
        $('input[type=radio][name=select_resource]').change(function () {
            if (this.value == 1) {
                $("#div_txt").show();
                $("#div_file").hide();
                $("#btn_upload").hide();
            }
            if (this.value == 2) {
                $("#div_txt").hide();
                $("#setStyleTable").show();
                $("#div_file").show();
                $("#btn_upload").show();
                //$("#file_1").attr("accept","image/*");
                var uploadFile = document.getElementById("file_1");
                uploadFile.setAttribute('accept', "image/*");

            }
            if (this.value == 3) {
                $("#div_txt").hide();
                $("#div_file").show();
                $("#btn_upload").show();
                var uploadFile = document.getElementById("file_1");
                uploadFile.setAttribute('accept', "video/*");
            }
        });
    });


    function initSelectData(curInfo) {

        layui.use(['form', 'layer', 'jquery'],
            function () {
                $ = layui.jquery;
                var form = layui.form,
                    layer = layui.layer;

                //自定义验证规则
                form.verify({
                    nikename: function (value) {
                        if (value.length < 5) {
                            return '昵称至少得5个字符啊';
                        }
                    },
                    pass: [/(.+){6,12}$/, '密码必须6到12位'],
                    repass: function (value) {
                        if ($('#L_pass').val() != $('#L_repass').val()) {
                            return '两次密码不一致';
                        }
                    }
                });

                //监听提交
                form.on('submit(add)',
                    function (data) {
                        var radioVal = $("input[name=select_resource]:checked").val();
                        let sizeWidth=192;
                        let sizeHeight=96;

                        if($("#select_ledSize").val()==25)
                        {
                             sizeWidth=192;
                             sizeHeight=96;
                        }
                        if($("#select_ledSize").val()==15)
                        {
                            sizeWidth=320;
                            sizeHeight=160;
                        }
                        let multiline=0;
                        debugger;

                        if($("#input_multiline").get(0).checked){
                            multiline=1;
                        }
                        var fontParams = {
                            "width":sizeWidth,
                            "height":sizeHeight,
                            "fontSize": $("#L_txtFontSize").val(),
                            "fontColor": $("#L_txtFontColor").val(),
                            "left": $("#L_txtLeft").val(),
                            "top": $("#L_txtTop").val(),
                            "stay": $("#L_txtStay").val(),
                            "speed": $("#L_txtSpeed").val(),
                            "special": $("#L_txtSpecial").val(),
                            "bgColor": $("#L_txtBgColor").val(),
                             "multiline":multiline,
                        };
                        let parms = {
                            "resourcesType": radioVal,
                            "txtContent": $("#L_txtContent").val(),
                            "resourcesUrl": uploadSuccessPath,
                            "resourcesName": uploadSuccessName,
                            "fontParams": fontParams
                        };
                        debugger;
                        if (radioVal == 2 || radioVal == 3) {
                            if (uploadSuccessPath == null || uploadSuccessPath == "") {
                                alert("请选择文件并点击上传！");
                                return true;
                            }
                        } else {
                            parms.resourcesName = data.field.resourcesName;
                        }
                        let result = sensorServer.addContentResources(parms);
                        console.log(result);
                        let msg = "操作失败";
                        if (result == 1) {
                            msg = "操作完成";
                            layer.alert(msg, {
                                    icon: 6
                                },
                                function () {
                                    //关闭当前frame
                                    xadmin.close();
                                    // 可以对父窗口进行刷新
                                    xadmin.father_reload();
                                });
                        }else{
                            layer.alert(msg, {
                                    icon: 5
                                },
                                function () {
                                    //关闭当前frame
                                    //xadmin.close();
                                    // 可以对父窗口进行刷新
                                    //xadmin.father_reload();
                                });
                        }

                        return false;
                    });

                form.on('submit(upload)',
                    function (data) {
                        upload_FileInfoRe();
                        return false;
                    });

            });
    }

    var uploadSuccessPath = "";
    var uploadSuccessName = "";

    function upload_FileInfoRe() {
        let formData = new FormData();
        formData.append("file", document.getElementById('file_1').files[0]);
        uploadSuccessName = document.getElementById('file_1').files[0].name;
        var maxsize = 15 * 1024 * 1024;//20M
        if (document.getElementById('file_1').files[0].size > maxsize) {
            layer.msg("上传的文件请小于15M");
            return;
        }
        let url = sensorServer.getUploadFileUrl();
        $.ajax({
            url: url,
            type: "post",
            data: formData,
            processData: false,
            contentType: false,
            xhr: function () { //上传进度条
                var myXhr = $.ajaxSettings.xhr();
                if (myXhr.upload) { //检查上传的文件是否存在
                    myXhr.upload.addEventListener('progress', function (e) {
                        undefined

                        var loaded = e.loaded; //已经上传大小情况

                        var total = e.total; //附件总大小

                        var percent = Math.floor(100 * loaded / total) + "%"; //已经上传的百分比

                        //console.log("已经上传了："+percent);

//显示进度条

                        $("#content").css("width", percent).css("height", 20).css("margin-top", 8).css("backgroundColor", "#33CCFF").css("color", "white").html("" + percent + "");

                    }, false); // for handling the progress of the upload
                }
                return myXhr;
            },
            success: function (data) {
                console.log(JSON.stringify(data));
                if (data.msg == "操作成功" && data.data != null) {
                    uploadSuccessPath = data.data;
                    layer.msg("上传成功！");
                } else {
                    alert(JSON.stringify(data));
                    layer.msg("上传失败！");
                }
            },
            error: function (e) {
                alert("错误！！");

            }
        });
    }
</script>
</body>

</html>
